<template>

  <div class="vacation">

    <section class="view">

      <!-- tab切换 -->

      <div class="view-tab">
  
        <span :class='{selected:type=="年假"}' @click.stop='type="年假"'>年假</span>
  
        <span :class='{selected:type=="病假"}' @click.stop='type="病假"'>病假</span>
  
      </div>
  
      <!-- 展开的内容 -->
  
  
        <div class="view-content" ref='viewContent'>
  
          <ul>
            <li v-for='(k,i) in res' v-if='res' :key='i' >
              
              <h2 class="title" style='font-weight:normal'>

                <span style='font-size:15px'>{{k.leave_type}}</span>
  
                <span 
                v-if='k.leave_type!=="有薪病假"'
                class="title-subhead" 
                :class='{"subhead-warning":active==1}'>有效期 {{k.end_dt}}</span>

                <span v-if='k.leave_type=="有薪病假"' style='float:right;color:#26a2ff'>剩余{{k.rest_days}}天</span>
              </h2>
  
              <p class="remain type1" v-if='k.leave_type=="年假"'>
  
                <span>共{{k.sum_days}}天</span>

                <span>剩余{{k.rest_days}}天</span>

                <span style="margin-left:.2rem">已休{{k.sum_days - k.rest_days}}天</span>


              </p>
  
  
              <p class="remain type2" v-if='k.leave_type=="有薪病假"||k.leave_type=="全薪病假"'>

                <span v-if='k.leave_type=="全薪病假"'>共休{{k.sum_days}}天</span>

                <span v-if='k.leave_type!=="有薪病假"'>剩余{{k.rest_days}}天</span>
  
                <span v-if='k.leave_type!=="有薪病假"' style="margin-left:.2rem">已休{{k.sum_days - k.rest_days}}天</span>
            
              </p>
              
              <mt-range
               v-if='k.leave_type !== "有薪病假"'
               v-model='rangeValue[i]' 
               :barHeight='10' disabled
               :key='i'>
  
              </mt-range>
  
            </li>

            <li v-if='!res' style='font-size:20px;text-align:center;padding-top:.2rem'>数据为空</li>
          </ul>
  
  
        </div>
  
  
<!--  
      <div class="selectDown" @click='selectDown'>
  
          <p>{{show?'点击收起':'点击展开'}}</p>
  
           <span>▲</span> 
  
      </div>-->
  
  
    </section>



    <!-- 请假详情 -->
  
    <section class="detail">
  
      <ul>

        <li v-for='i in startDataList' @click="targetToRecord(i)">
  
          <h3 class="detail-title">
  
            <span>{{i.leave_name}}</span> <span>共{{i.leave_day}}天</span>
  
            <p>{{i.start_time}} 至 {{i.end_time}}</p>
  
          </h3>
  
          <p class="detail-content">
              {{i.leave_reason}}
          </p>
  
        </li>
  
      </ul>

      <!-- <ul v-if="type==='病假'">
  
        <li v-for='i in sickLeaveList' @click="targetToRecord(i)">
  
          <h3 class="detail-title">
  
            <span>{{i.leave_name}}</span> <span>共{{i.leave_day}}天</span>
  
            <p>{{i.start_time}} 至 {{i.end_time}}</p>
  
          </h3>
  
          <p class="detail-content">
              {{i.leave_reason}}
          </p>
  
        </li>
  
      </ul> -->
    </section>
  
    <section class='apply'>
  
      <span @click="targetToLeave">我要休假</span>
  
    </section>
  
  </div>
</template>

<script>
import Vue from "vue"

import {

  Range

} from "mint-ui"

Vue.component(Range.name, Range)

export default {

  data () {

    return {

      active: 1,

      rangeValue: 10,

      show: true,

      res: '',

      type: '年假',

      height: '',

      startDataList:[],
      yearLeaveList:[],
      sickLeaveList:[],

    }

  },

  watch: {

    type (newValue, oldValue) {

      if (newValue !== oldValue) {

        this.sendAjax()

        if (this.show) {

          let el = this.$refs.viewContent

          if (newValue == '病假') {

            el.style.height = (el.querySelector('ul').offsetHeight)*1.5 + 'px'

          } else if (newValue == '年假'){

            el.style.height = (el.querySelector('ul').offsetHeight)/1.5+ 'px'
          }
        }

      }

    }

  },

  mounted () {
    // var token = location.search.split('=')[1];
    // sessionStorage.setItem('token',token);
    this.sendAjax();
    this.getStartSend();
    let el = this.$refs.viewContent

      if (this.type == '年假') {

        el.style.height = (el.querySelector('ul').offsetHeight)*2 + 'px'

      }

  },

  methods: {

    selectDown () {

      let el = this.$refs.viewContent

      if (el) {

        this.height = (el.querySelector('ul').offsetHeight)

        if (el.offsetHeight) {
          this.animate(el, { height: 0 })
          this.show = false
        } else {
          this.animate(el, { height: this.height })
          this.show = true
        }
      }

    },


    sendAjax () {

      let params = {

        leaveType: this.type,

        emplid: '10000898',

        pageNum: 1,

        pageSize: 2

      }

      this.Axios.Post(this.URL.getLeaveaManagerBylist.url, params)

        .then((res) => {
          if (this.type === '病假') {
              var result = res.data.datas.leaveList;
              this.res = result.sort(function(a,b){
                  return a.sort - b.sort;
              });
          } else {
              this.res = res.data.datas.leaveList;
          }
          


          // this.res && this.res.reverse();

          this.rangeValue = []

          this.res.forEach((element, i) => {

            this.rangeValue.push((this.res[i].rest_days /  this.res[i].sum_days)*100)

          })

        })

    },



    animate (obj, json, fn) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var flag = true;
        for (var attr in json) {
          var current = 0;
          if (attr == "opacity") {
            current = Math.round(parseInt(getStyle(obj, attr) * 100)) || 0;
          } else {
            current = parseInt(getStyle(obj, attr)); // 数值
          }
          var step = (json[attr] - current) / 10; // 步长  用目标位置 - 现在的位置 / 10
          step = step > 0 ? Math.ceil(step) : Math.floor(step);

          obj.style[attr] = (current + step)  + "px";

          if (current != json[attr]) {
            // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
            flag = false;
          }
        }
        if (flag) {
          // 用于判断定时器的条件
          clearInterval(obj.timer);
          //alert("ok了");
          if (fn) {
            // 很简单   当定时器停止了。 动画就结束了  如果有回调，就应该执行回调
            fn(); // 函数名 +  （）  调用函数  执行函数
          }
        }
      }, 10);


      function getStyle (obj, attr) {
        if (obj.currentStyle)  // ie 等
        {
          return obj.currentStyle[attr];  // 返回传递过来的某个属性
        }
        else {
          return window.getComputedStyle(obj, null)[attr];  // w3c 浏览器
        }
      }
    },


    targetToLeave(){
        location.href = '/module/leave.html?token='+ sessionStorage.getItem('token');;
    },
    targetToRecord:function(itemData){
        console.log(itemData);
        location.href = '/module/approveRecord.html?AI=' + (itemData.applyId||itemData.busi_id) + '&EI=' + itemData.exectionId;
    },

    getStart:function(){
        let params = {
          pageSize: 10,
          pageNum: 1
        }
        this.Axios.Post(this.URL.myleaveByrecord.url, params)
            .then((res) => {
                console.log(res)
                var result = res.data.datas;
                var arrYear=[],arrSick=[];
                result.forEach(function(val){
                    if (val.leave_name === '病假') {
                        arrSick.push(val);
                    } else if (val.leave_name === '年假') {
                        arrYear.push(val);
                    }
                })
                this.yearLeaveList = arrYear;
                this.sickLeaveList = arrSick;
                // console.log(this.yearLeaveList,'this.yearLeaveList');
                // console.log(this.sickLeaveList,'this.sickLeaveList');
            }) 

        // var res={"status":1,"message":"查询成功","total":1,"datas":[{"applyId":48,"start_time":"2017-12-16","Leave_end_section":"2","trialstep":"待部门领导审批","leave_name":"事假","end_time":"2017-12-17","leave_reason":"'16:53'","exectionId":"95001","leave_day":"0.0","Leave_st_section":"1"}],"page":{"pageNum":1,"pageSize":10,"total":1,"pages":1},"token":""};

        // this.startDataList = res.datas;
    },
    getStartSend:function(){
        let params = {
          pageSize: 10,
          pageNum: 1
        }
        this.Axios.Post(this.URL.myleaveByrecord.url, params)
            .then((res) => {
                console.log(res)
                res.data && (this.startDataList = res.data.datas);
            }) 
    },

  },

};
</script>

<style lang='less'>
.vacation {
  width: 100%;

  .view {
    background-color: #fff;

    position: relative;

    top: 0;

    left: 0;

    padding: 20/50rem 30rem/50;

    .view-tab {
      width: 190/50rem;

      font-size: 16px;

      margin: 0 auto;

      display: flex;

      span {
        text-align: center;

        flex: 1;

        padding: 8/50rem 0;

        background-color: #ffffff;

        color: #26a2ff;

        border-radius: 22/50rem 0 0 22/50rem;

        border: 1px solid #26a2ff;

        cursor: pointer;
      }

      span:last-of-type {
        border-radius: 0 22/50rem 22/50rem 0;
      }

      span.selected {
        color: #fff;

        background-color: #26a2ff;
      }
    }

    .selectDown {
      position: absolute;

      left: 50%;

      margin-left: -32/50rem;

      z-index: 999;

      cursor: pointer;

      p {
        color: #999;

      }

      span {
        position: absolute;

        left: 0;

        color: grey;

        font-size: 20px;

        margin-left: 20/50rem;

        transform: rotate(180deg);
      }
    }

    .view-content {
      margin-top: 10/50rem;

      padding: 0 5/50rem;

      overflow: hidden;

      ul {
        padding-bottom: 30px;
      }
      .title {
        margin-top: 25/50rem;

        padding: 8/50rem 0;

        span:first-of-type {
          margin-right: 6rem/50;
        }

        .title-subhead {
          color: #669966;

          font-size: 12px;
        }

        .subhead-warning {
          color: #cc0000 !important;
        }
      }

      .remain {
        padding-top: 15rem/50;

        font-size: 12px;

        overflow: hidden;

        span:nth-of-type(2) {
          float: right;
          text-align: right;
          color: #26a2ff;
        }
      }

      .mt-range {
        .mt-range-progress {
          border-radius: 30px 0 0 30px !important;

          background-color: #e4e4e4 !important;
        }

        .mt-range-runway {
          border-radius: 30px !important;

          right: -12px;

          border-top-color: #26a2ff;
        }

        .mt-range-thumb {
          width: 12px !important;

          height: 12px !important;

          top: 9px;

          margin-left: -2px;

          border: 1px solid #26a2ff;
        }
      }

      .mt-range-content {
        margin-right: 10px !important;
      }

      .mt-range--disabled {
        opacity: 1;
      }
    }
  }

  .detail {
    margin-top: 10/50rem;

    padding-bottom: 100rem/50;

    li {
      margin-top: 10/50rem;

      background-color: #fff;
    }

    .detail-title {
      padding: 8rem/50;

      font-weight: normal;

      overflow: hidden;

      p {
        display: inline-block;

        float: right;

        color: grey;

        font-size: 12px;

        margin-top: 2/50rem;
      }

      span:first-of-type {
        position: relative;

        margin-left: 16/50rem;

        &::before {
          content: "";

          width: 6/50rem;

          height: 6/50rem;

          border-radius: 50%;

          background-color: #26a2ff;

          position: absolute;

          left: -14/50rem;

          top: 50%;

          margin-top: -3/50rem;
        }
      }

      span:last-of-type {
        margin-left: 15/50rem;
      }
    }

    .detail-content {
      border-top: #f4f4f4 solid 1px;

      padding: 14rem/50 0 14rem/50 12rem/50;
    }
  }

  .apply {
    position: fixed;

    bottom: 0;

    left: 0;

    background: #fff;

    width: 100%;

    padding: 12/50rem 0;

    span {
      display: block;

      width: 200/50rem;

      font-size: 16px;

      margin: 0 auto;

      padding: 10rem/50 0;

      border-radius: 28rem/50;

      text-align: center;

      background-color: #26a2ff;

      color: #fff;

      cursor: pointer;
    }
  }
}
</style>